<template>
	<view class="bg min100 plr-52 pt-80 white ">
		<view class="status_bar"></view>
		<view class="">
			<view class="mt-40 size-46" style="color: #000;">
				请登录1
			</view>
			<view class="radius-46 mt-60">
				<u-field v-model="phone" :border-bottom="true" label-width="0" placeholder="请输入手机号登录" placeholder-style="color:#999;font-size:26rpx;">
					
				</u-field>
				<!-- <view class="tipsbox" v-if="isshow">手机号必填</view> -->
			</view>
			<view class="mt-40 radius-46 ">
				<u-field @focus="isshowfn" v-model="password"  :border-bottom="true" label-width="0" placeholder="请输入密码" 
					placeholder-style="color:#999;font-size:26rpx;" type="password">
				</u-field>
			</view>
			<view class="flex flex-between mtb-48 size-32 gray" style="color: #fff;">
				<view @click="goRegister" style="color: #000;">
					注册
				</view>
				<view @click="goForget" style="color: #000;">
					忘记密码
				</view>
			</view>
			<view class="bottombox">
				<view class="Login_agreement">
					<u-checkbox-group class="mt-86" active-color="#44acff">
						<u-checkbox v-model="checked" shape="circle">
							<view class="policytext">
								点击按钮即表示您同意并愿意遵守<text  @click="toAgreement">《用户协议》</text>和<text @click="toPolicy">《隐私政策》</text>
							</view>
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<u-button type="primary" class="loginbtn" hover-class="none" @click="login">登录</u-button>
			</view>
		</view>
		<view class="recordbox" @click="todetail">备案号：蜀ICP备2022016742号</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				checked: false,
				radiolist1: [{
				            name: '',
				            disabled: false
				          }
				          ],
				          // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				          // radiovalue1: '苹果',
				
				checked:false,
				phone:'13333333332',
				password:"33333333",
				isshow:false
			}
		},
		onLoad() {
		},
		methods:{
			todetail(){
				window.location.href='https://beian.miit.gov.cn'
			},
			toPolicy(){
				uni.navigateTo({
					url:'../my/policy'
				})
			},
			toAgreement(){
				uni.navigateTo({
					url:'../my/agreement'
				})
			},
			groupChange(n) {
			      },
			      radioChange(n) {
					  console.log(n)
			      },
			isshowfn(){
				if(!this.phone){
					this.isshow=true
				}
			},
			goRegister(){
				uni.navigateTo({
					url:"./register"
				})
			},
			goForget(){
				uni.navigateTo({
					url:"./forgetPsd"
				})
			},
			login(){
				if (this.phone == '') {
					uni.showToast({
						title: "请输入手机号码",
						icon: 'none'
					})
					return;
				}
				if (this.password == '') {
					uni.showToast({
						title: "请输入密码",
						icon: 'none'
					})
					return;
				}
				if (this.checked == false) {
					uni.showToast({
						title: "请先同意用户协议!",
						icon: 'none'
					})
					return;
				}
				// 登录
				this.$http('api/login/login', {
					phone: this.phone,
					password: this.password
				}, 'POST').then(res => {
					uni.showToast({
						title: '登录成功'
					})
					uni.setStorageSync("token", res.app_token)
					uni.setStorageSync("im_token", res.im_token)
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/home/index'
						})
					}, 500)
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.recordbox{
		width: 100%;
		position: fixed;
		bottom: 40rpx;
		text-align: center;
		color: #fff;
		font-size: 20rpx;
	}
	.policytext{
		font-size: 20rpx;
	}
	.bottombox{
		position: fixed;
		bottom: 90rpx;
		.Login_agreement{
			color: #c8c8c8;
			font-size: 20rpx;
			display: flex;
			margin-bottom: 20rpx;
		}
	}
	.loginbtn{
		color: #fff!important;
		background-color:rgb(75, 61, 241) !important;
	}
	.tipsbox{
		color: red;
		position: relative;
		left: 40rpx;
		top: -30rpx;
		font-size: 20rpx;
	}
	.logo{
		width:296rpx;
		height:296rpx;
		display: block;
		margin: 0 auto;
	}
	.u-checkbox-group {
		width: 100%;
	
		::v-deep  .u-checkbox {
			width: 90%;
			margin: 0 auto;
			text-align: center;
			font-size: 20rpx;
		}
	
		::v-deep  .u-checkbox__label {
			margin-right: 0;
		}
	
		text {
			color: #44ACFF;
		}
	}
	// ::v-deep  .u-field{
	// 	color:#fff !important;
	// }
</style>
